import Button from 'src/components/Button'
import Block from 'src/components/Block'
import useFetch from './useFetch4'
import s from './index.module.scss'
import r from 'src/reset.module.scss'
import List from '../List'
import {searchApi} from './api'
import { useEffect } from 'react'

const td = {
  title: '搜索案例四',
  desc: '自定义hook，这是一种常规搜索方案，通过在input中输入搜索关键词，然后点击搜索按钮搜索结果，并新增了初始化需求'
}

// 在常规搜索案例的基础之上，新增初始化需求
export default function DemoOneNormal() {
  const {
    loading, 
    setLoading, 
    setParam,
    list = [],
    error
  } = useFetch(searchApi)

  useEffect(() => {
    console.log('zhixingzxxx')
  }, [setParam])

  return (
    <Block className={s.container} title={td.title} desc={td.desc}>
      <div className={r.flex}>
        <input
          className={s.input}
          placeholder="请输入您要搜索的内容"
          onChange={(e) => setParam(e.target.value)}
        />
        <Button
          className={s.button}
          onClick={() => setLoading(true)}
        >
          搜索
        </Button>
      </div>
      <List
        list={list}
        loading={loading}
        error={error}
        renderItem={(item) => (
          <div key={item} className={s.item}>{item}</div>
        )}
      />
    </Block>
  )
}
